<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: tomato;

            /*
                animation-name
                    - 指定动画的名字
                animation-duration
                    - 一次动画执行的时间
                animation-iteration-count
                    - 动画执行的次数
                    - infinite 一直执行
            */
            animation-name: change-color;
            animation-duration: 3s;

            /*animation-iteration-count: infinite;*/

        }

        /*
            通过keyframes来定义关键帧
        */
        @keyframes move {
            /*
                from 表示动画的开始位置
            */
            0%{
                margin-left: 0;
            }

            10%{
                margin-top: 100px;
                margin-left: 300px;
            }

            20%{
                margin-top: 200px;
                margin-left: 100px;
            }

            30%{
                background-color: #bfa;
            }

            40%{
                margin-left: 0;
            }

            /*
                to 表示动画的结束位置
            */
            100%{
                margin-left: 500px;
            }
        }

        @keyframes change-color {
            0%, 20%{
                background-color: #bfa;
            }

            10%, 30%{
                background-color: yellow;
            }

            40%, 60%{
                background-color: yellowgreen;
            }

            50%, 70%{
                background-color: deepskyblue;
            }

            80%, 100%{
                background-color: orange;
            }

            90%{
                background-color: chocolate;
            }
        }
    </style>
</head>
<body>
<!--
    animation
        - 动画
-->

    <div class="box1"></div>

</body>
</html>